<template>
	<div class="body">
		<div class="title">
			<div style="width: 25vw;color: #fff;padding-top: 1vh;font-size: 25px;">
				<span style="width: 100%;padding-left: 0.8vw">
					{{time}}
				</span>
			</div>
			<div style="width: 50vw;color: #fff;text-align: center;padding-top: 1vh;">
				<h2>流通数据统计平台</h2>
			</div>
			<div style="width: 25vw;color: #fff;padding-top: 1vh;font-size: 25px;;text-align: right">
				<span style="width: 100%;padding-right: 0.8vw">
					{{week}}
				</span>
			</div>
		</div>
		<div class="content">
			<div style="width: 30vw;padding:0 0.4vw">
				<div class="content-title">&nbsp;&nbsp;不同年段图书借阅数据&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43vh">
					<span></span><span></span><span></span><span></span>
					<div id="bookBorrowOfGradeChart" style="height: 100%;"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;班级图书借阅数据&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43vh">
					<span></span><span></span><span></span><span></span>
					<div id="bookBorrowOfClassChart" style="height: 100%;"></div>
				</div>
			</div>
			<div style="width: 37.5vw;padding:0 0.4vw">
				<div class="content-title">&nbsp;&nbsp;年段图书信息数据&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 89vh">
					<span></span><span></span><span></span><span></span>
					<div id="bookTypeOfGradeChart" style="height: 50%;"></div>
					<div id="bookRankingChart" style="height: 50%;"></div>
				</div>
			</div>
			<div style="width: 30vw;padding:0 0.4vw">
				<div class="content-title">&nbsp;&nbsp;班级读者借阅排行&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43vh">
					<span></span><span></span><span></span><span></span>
					<div id="readerRankingOfClassChart" style="height: 100%;"></div>
				</div>
				<div class="content-title">&nbsp;&nbsp;年段读者借阅排行&nbsp;&nbsp;</div>
				<div class="chartRegion" style="height: 43vh">
					<span></span><span></span><span></span><span></span>
					<div id="readerRankingOfGradeChart" style="height: 100%;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	//import echarts from 'echarts/lib/echarts'
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入饼状图
	require('echarts/lib/chart/pie');
	// 引入曲线图
	require('echarts/lib/chart/line');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	require('echarts/lib/component/legend')
	require('echarts/lib/component/dataZoom')
	require('echarts/lib/component/toolbox')

	import { GloabFun, HttpServer } from '../../../assets/js/common.js'
	var myChart = null;
	var date = new Date();
	export default {
		components: {

		},
		data() {
			//去重
			Array.prototype.unique1 = function(){
				var res = [this[0]];
				for(var i = 1; i < this.length; i++){
					var repeat = false;
					for(var j = 0; j < res.length; j++){
						if(this[i] == res[j]){
							repeat = true;
							break;
						}
					}
					if(!repeat){
						res.push(this[i]);
					}
				}
				return res;
			}
			Array.prototype.sum = function() {
				var result = 0;
				for(var i = 0; i < this.length; i++) {
					result += this[i];
				}
				return result;
			};
			return {
				time: '',
				week: '',
				timer: null,
				bookTypeOfGradeTimeOut: null,
				readerRankingOfClassTimeOut: null,
				readerRankingOfGradeTimeOut: null,
				bookBorrowOfClassTimeOut: null,
				popularBookTimeOut: null,
				bookBorrowOfGradeTimeOut: null,
				gradeAndClassArr: [
				{grade: '一年级',class: '一班'},{grade: '一年级',class: '二班'},{grade: '一年级',class: '三班'},
				{grade: '二年级',class: '一班'},{grade: '二年级',class: '二班'},{grade: '二年级',class: '三班'},
				{grade: '三年级',class: '一班'},{grade: '三年级',class: '二班'},{grade: '三年级',class: '三班'},
				{grade: '四年级',class: '一班'},{grade: '四年级',class: '二班'},{grade: '四年级',class: '三班'},
				{grade: '五年级',class: '一班'},{grade: '五年级',class: '二班'},{grade: '五年级',class: '三班'},
				{grade: '六年级',class: '一班'},{grade: '六年级',class: '二班'},{grade: '六年级',class: '三班'},
				],
				gradeAndClassArrIndex: 0,//用于班级读者排行时gradeAndClassArr的下标
				gradeArr: ["一年级","二年级","三年级","四年级","五年级","六年级"],
				gradeArrIndex: 0,//用于年段图书借阅类型gradeArr的下标
				gradePopularBookIndex: 0,
				gradeReaderRankingIndex: 0,//用于年段读者借阅排行时gradeArr的下标
				bookBorrowOfClassPage: 1,//用于查询班级图书借阅量信息的分页
				bookBorrowOfClassPageCount: 0//查询班级图书借阅量信息的总分页
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//格式化时间：分秒。
			formatTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			},
			showTime() {
				var myDate = new Date();
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var dateArr = ["日", "一", '二', '三', '四', '五', '六'];
				var day = myDate.getDay();
				var hours = myDate.getHours();
				var minutes = this.formatTime(myDate.getMinutes());
				var seconds = this.formatTime(myDate.getSeconds());
				this.time = " " + year + "年" + month + "月" + date + "日";
				this.week = "星期" + dateArr[day] + "\n" + hours + ":" + minutes + ":" + seconds;
				this.timer = null;
				this.timer = setTimeout(this.showTime, 1000);
			},
			//查询班级图书借阅数据
			getBookBorrowOfClass() {
				if(this.bookBorrowOfClassPage > this.bookBorrowOfClassPageCount){
					this.bookBorrowOfClassPage = 0;
				}
				var param = {
					index: this.bookBorrowOfClassPage,
					pagesize: 6,
					nianji: "",
					banji: "",
					isall: true
				}
				HttpServer.httpPost.call(this,'/Api/Statistics/AnyClass/BorrowCount',param,function(response){}, function(response){
					this.bookBorrowOfClassPageCount = response.data.pagecount;
					var class1Datas = [], class2Datas = [], class3Datas= [], xAxisDatas = [];
					response.data.info.forEach(function(item){
						xAxisDatas.push(item.nianji);
						if(item.banji == '一班'){
							class1Datas.push(item.borrowCount);
						}else if(item.banji == '二班'){
							class2Datas.push(item.borrowCount);
						}else if(item.banji == '三班'){
							class3Datas.push(item.borrowCount);
						}
					})
					//班级图书借阅量
					myChart = echarts.init(document.getElementById("bookBorrowOfClassChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						color: ['#16A085','#E89589','#C39BD3'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b} : {c}"
						},
						legend: {
							data: ['一班', '二班', '三班'],
							textStyle: {
								color: '#fff'
							}
						},
						calculable: true,
						xAxis: [
						{
							type: 'category',
							axisTick: {show: false},
							data: xAxisDatas.unique1(),
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						}
						],
						yAxis: [
						{
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						}
						],
						series: [
						{
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								}
							},
							name: '一班',
							type: 'bar',
							data: class1Datas
						},
						{
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								}
							},
							name: '二班',
							type: 'bar',
							data: class2Datas
						},
						{
							itemStyle: {
								normal: {
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								}
							},
							name: '三班',
							type: 'bar',
							data: class3Datas
						}
						]
					});
					this.bookBorrowOfClassTimeOut = null;
					this.bookBorrowOfClassTimeOut = setTimeout(this.getBookBorrowOfClass,5000);
				})
				this.bookBorrowOfClassPage++;
			},
			//查询年段图书借阅数据
			getBookBorrowOfGrade() {
				var param = {
					index: 0,
					pagesize: 0,
					nianji: "",
					"isall": true
				}
				HttpServer.httpPost.call(this,'/Api/Statistics/AnyGrade/BorrowCount',param,function(response){},function(response){
					//年级图书借阅量
					var seriesDatas = [], xAxisDatas = [];
					response.data.info.forEach(function(item){
						seriesDatas.push(item.borrowCount);
						xAxisDatas.push(item.nianji);
					})
					myChart = echarts.init(document.getElementById("bookBorrowOfGradeChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b} : {c}"
						},
						xAxis: {
							type: 'category',
							data: xAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							},
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
										'#F9E79F','#BA4A00','#ECF0F1','#16A085','#E89589','#C39BD3'
										];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								}
							},
							data: seriesDatas,
							type: 'bar'
						}]
					})
					this.bookBorrowOfGradeTimeOut = null;
					this.bookBorrowOfGradeTimeOut = setTimeout(this.getBookBorrowOfGrade,5000);
				})
			},
			//查询班级读者借阅排行
			getReaderRankingOfClass() {
				if(this.gradeAndClassArrIndex >= this.gradeAndClassArr.length){
					this.gradeAndClassArrIndex = 0;
				}
				var param = {
					index: 1,
					pagesize: 10,
					nianji: this.gradeAndClassArr[this.gradeAndClassArrIndex].grade,
					banji: this.gradeAndClassArr[this.gradeAndClassArrIndex].class,
					isall: true
				}
				HttpServer.httpPost.call(this,'/Api/Statistics/AnyClass/BorrowRanking',param, function(response){}, function(response){
					var xAxisDatas = [], seriesDatas = [];
					response.data.info.forEach(function(item){
						xAxisDatas.push(item.readerName);
						seriesDatas.push(item.borrowCount);
					})
					myChart = echarts.init(document.getElementById("readerRankingOfClassChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b} : {c}"
						},
						title : {
							text: response.data.info[0].nianji + response.data.info[0].banji,
							x:'center',
							textStyle: {
								color: '#fff'
							}
						},
						xAxis: {
							type: 'category',
							data: xAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								},
								formatter:function(value){ 
									return value.split("").join("\n");  
								}  
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
										'#F9E79F','#BA4A00','#ECF0F1','#16A085','#E89589','#C39BD3',
										'#C33531','#EFE42A','#64BD3D','#EAF2F8'];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								}
							},
							data: seriesDatas,
							type: 'bar'
						}]
					})
					this.readerRankingOfClassTimeOut = null;
					this.readerRankingOfClassTimeOut = setTimeout(this.getReaderRankingOfClass, 10000);
				})
				this.gradeAndClassArrIndex++;
			},
			//查询年段读者借阅排行
			getReaderRankingOfGrade() {
				if(this.gradeReaderRankingIndex >= this.gradeArr.length){
					this.gradeReaderRankingIndex = 0;
				}
				var param = {
					index: 1,
					pagesize: 10,
					nianji: this.gradeArr[this.gradeReaderRankingIndex],
					banji: '',
					isall: true
				}
				HttpServer.httpPost.call(this,'/Api/Statistics/AnyClass/BorrowRanking',param, function(response){}, function(response){
					var xAxisDatas = [], seriesDatas = [];
					response.data.info.forEach(function(item){
						xAxisDatas.push(item.banji + item.readerName);
						seriesDatas.push(item.borrowCount);
					})
					myChart = echarts.init(document.getElementById("readerRankingOfGradeChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b} : {c}"
						},
						title : {
							text: response.data.info[0].nianji,
							x:'center',
							textStyle: {
								color: '#fff'
							}
						},
						xAxis: {
							type: 'category',
							data: xAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								},
								formatter:function(value){ 
									return value.split("").join("\n");  
								}  
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) {
										var colorList = [
										'#F9E79F','#BA4A00','#ECF0F1','#16A085','#E89589','#C39BD3',
										'#C33531','#EFE42A','#64BD3D','#EAF2F8'];
										return colorList[params.dataIndex]
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								}
							},
							data: seriesDatas,
							type: 'bar'
						}]
					})
					this.readerRankingOfGradeTimeOut = null;
					this.readerRankingOfGradeTimeOut = setTimeout(this.getReaderRankingOfGrade, 10000);
				})
				this.gradeReaderRankingIndex++;
			},
			//不同年段图书借阅类型对比
			getBookTypeOfGrade() {
				if(this.gradeArrIndex >= this.gradeArr.length){
					this.gradeArrIndex = 0;
				}
				var param = {
					index: 0,
					pagesize: 0,
					nianji: this.gradeArr[this.gradeArrIndex],
					banji: '',
					isall: true
				}
				HttpServer.httpPost.call(this,'/Api/Statistics/AnyGrade/BookKindCount',param,function(response){}, function(response){
					var seriesDatas = [];
					for(var i = 0 ; i < response.data.info.length; i ++){
						seriesDatas[i] = {};
						seriesDatas[i].value = response.data.info[i].borrowCount;
						seriesDatas[i].name = response.data.info[i].bookKind;
					}
					myChart = echarts.init(document.getElementById("bookTypeOfGradeChart"));
					myChart.setOption({
						animation: false,
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						title : {
							text: response.data.info[0].nianji + '图书借阅类型对比',
							x:'center',
							textStyle: {
								color: '#fff'
							}
						},
						tooltip : {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						series : [
						{
							type: 'pie',
							radius : '55%',
							center: ['55%', '50%'],
							data: seriesDatas,
							label: {
								normal: {
									formatter: '{b}:{c}',
									textStyle: {
										fontWeight: 'bolder',
										fontSize: '13'
									}
								}
							},
							labelLine: {
								normal: {
									lineStyle: {
									},
								}
							},
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
						]
					});
					this.bookTypeOfGradeTimeOut = null;
					this.bookTypeOfGradeTimeOut = setTimeout(this.getBookTypeOfGrade, 8000);
				})
				this.gradeArrIndex++;
			},
			//查询全年段热门图书
			getPopularBooks() {
				if(this.gradePopularBookIndex >= this.gradeArr.length){
					this.gradePopularBookIndex = 0;
				}
				HttpServer.httpPost.call(this,'/Api/Statistics/PopularBookRanking',{index: 1,pagesize: 10,nianji: this.gradeArr[this.gradePopularBookIndex], isall: true}, function(response){}, function(response){
					var xAxisDatas = [], seriesDatas = [];
					response.data.info.forEach(function(item){
						xAxisDatas.push(item.bookName);
						seriesDatas.push(item.borrowCount);
					})
					myChart = echarts.init(document.getElementById("bookRankingChart"));
					myChart.setOption({
						animation: false,
						title : {
							text: response.data.info[0].nianji+'热门图书排行',
							x:'center',
							textStyle: {
								color: '#fff'
							}
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							},
							formatter: "{b} : {c}"
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: xAxisDatas,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: '12'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1, //这里是坐标轴的宽度
								}
							}
						},
						series: [{
							itemStyle: {
								normal: {
									color: function(params) { 
										var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#C39BD3']; 
										return colorList[params.dataIndex] 
									},
									label: {
										show: true,
										position: 'top',
										formatter: '{c}',
										textStyle: {
											fontSize: 12
										}
									}
								},
							},
							data: seriesDatas,
							type: 'bar'
						}]
					});
					this.popularBookTimeOut = null;
					this.popularBookTimeOut = setTimeout(this.getPopularBooks, 8000);
				})
				this.gradePopularBookIndex++;
			}
		},
		created() {
			this.showTime();
			this.getBookBorrowOfClass();
			this.getBookBorrowOfGrade();
			this.getBookTypeOfGrade();
			this.getReaderRankingOfClass();
			this.getReaderRankingOfGrade();
			this.getPopularBooks();
		},
		beforeDestroy() {
			clearTimeout(this.timer);
			clearTimeout(this.bookTypeOfGradeTimeOut);
			clearTimeout(this.readerRankingOfClassTimeOut);
			clearTimeout(this.readerRankingOfGradeTimeOut);
			clearTimeout(this.bookBorrowOfClassTimeOut);
			clearTimeout(this.popularBookTimeOut);
			clearTimeout(this.bookBorrowOfGradeTimeOut);
		},
	}
</script>
<style scoped>
	@import '../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.body {
		height: 100vh;
		background: url('../../../assets/images/dataStatistic/bg.jpg') no-repeat;
		-moz-background-size: 100% 100%;
		background-size: 100% 100%;
		.title {
			height: 6vh;
			width: 100%;
			display: flex;
			background: rgba(135, 158, 255, 0.4);
			/* 一些不支持背景渐变的浏览器 */
			background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(135, 158, 255, 0.3)), to(#090edc));
		}
		.content {
			width: 100%;
			margin: 0;
			display: flex;
			.content-title {
				width: aotu;
				color: #fff;
				font-size: 16px;
				font-weight: bold;
				margin-left: 32px;
				background-color: #090edc;
				border-radius: 2px;
				display: inline;
				font-family: "Microsoft Yahei";
			}
			.chartRegion {
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 5px;
				position: relative;
				width: 100%;
				border: 0.1rem solid #879eff;
			}
			.chartRegion span:nth-child(1) {
				position: absolute;
				left: -4px;
				top: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0.3rem 0 0 0.3rem;
			}
			.chartRegion span:nth-child(2) {
				position: absolute;
				right: -4px;
				top: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0.3rem 0.3rem 0 0;
			}
			.chartRegion span:nth-child(3) {
				position: absolute;
				right: -4px;
				bottom: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0 0.3rem 0.3rem 0;
			}
			.chartRegion span:nth-child(4) {
				position: absolute;
				left: -4px;
				bottom: -4px;
				padding: 15px;
				border-style: solid;
				border-color: #090edc;
				border-width: 0 0 0.3rem 0.3rem;
			}
		}
	}
</style>